<template>
  <div class="page_home">
    <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide  v-for="(item, key, index) in swiperSlides" >
      <img :src="item.url" alt="" @click="swiperjump(item)">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>

  <div class="recommended">
    <div class="title">{{productlist.productName}}</div>
    <div class="trage">{{productlist.activetag}}</div>
    <div class="des">
      <div>
        <div class="red">{{productlist.yearIncome}}%</div>
        <div class="white">预期年化</div>
      </div>
      <div> <div class="red">{{productlist.interestLimitName}}天</div>
        <div class="white">投资期限</div></div>
      </div>
    <div class="buy" @click="buy(productlist.productId)">
      立即抢购
      <div class="active" v-show="productlist.tip==1">新手标</div>
      <div class="active" v-show="productlist.tip==2">金包独享</div>
       <div class="active" v-show="productlist.tip==3">本月畅销</div>
        <div class="active" v-show="productlist.tip==4">会员专享</div>
    </div>
  </div>
<div class="adlist">
   <div>
     <img  src="../public/imgs/step1.jpg" alt="" @click="jumph5('sendFullYear.html')">
    <img src="../public/imgs/step2.jpg" alt="" style="margin-right:0px;" @click="jumph5('bonus.html')">
   </div>
  </div>
   <!-- <topbar selected="首页"></topbar>  -->

</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import topbar from "../components/topbar.vue"
export default {
   components: {
    swiper,
    swiperSlide,
    topbar,
  },
  name: "",
  data() {
    return {
       swiperOption: {
         notNextTick: true,
         autoplay: true,
          // swiper configs 所有的配置同swiper官方api配置
          autoplay: 3000,
          direction : 'horizontal',
          setWrapperSize :true,
          pagination : '.swiper-pagination',
          debugger: true,
          onTransitionStart(swiper){
          },
        },
        swiperSlides:[],
        productlist:[],
    };
  },
  computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
  mounted() {
  },
     created() {
      //轮播
    this.$http.get(this.Interface.getAdList,{params:{adspaceId:3}}).then(res=>{
      this.swiperSlides=res.data.data.list
    });
    //产品列表
    this.$http.get(this.Interface.getProductList,{params:{sessionid:""}}).then(res=>{
      if(res.data.success){
        if(!res.data.data.list[0].activitys){
          res.data.data.list[0].activetag=""
        }else{
          res.data.data.list[0].activetag=res.data.data.list[0].activitys[0].activityDesc
        }
          this.productlist=res.data.data.list[0];
      }
    })
   },
  methods: {
     buy(id){
       this.Uitis.Jump({link:`${this.Interface.getH5}productdetail?productid=${id}`})
     },
      jumph5(url){
        this.Uitis.Jump({link:`${this.Interface.getOnline}`+url})
      },
      swiperjump(url){
         this.Uitis.Jump({link:`${url.link}`})
      }
  },

};
</script>
<style lang="less">
body{
  background: #f4f4f4;
}
.page_home{

  background: #f4f4f4;
  .recommended{
    background: #fff;
    margin-top:15px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    .title{
      font-weight: 600;
      font-size: 30px;
    }
    .trage{
      margin-top: 20px;
      color: #5261f7;
      font-size: 24px;
    }
    .des{
      text-align: center;
      margin-top: 40px;
      width: 440px;
      display: flex;
      justify-content: space-around;
      .red{
        color: #f2616d;
        font-size: 45px;
      }
      .white{
        margin-top: 25px;
        color: #999999;
        font-size: 22px;
      }
    }
    .buy{
     width: 292px;
	height: 62px;
	-webkit-border-radius: 5px 4px 4px 5px/4px;
	-moz-border-radius: 5px 4px 4px 5px/4px;
	border-radius: 5px 4px 4px 5px/4px;
  background-color: #5261f7;
  text-align: center;
  color: #fff;
  font-size: 30px;
  line-height: 62px;
  margin-top: 40px;
  position: relative;
  a{
    color: #fff;
    text-decoration: none;
  }
  .active{
    position:absolute;
    background: #ffbd33;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    line-height: 0;
    padding: 5px 8px;
    line-height: 25px;
    height: 25px;
    top:-13px;
     right: -35px;
    }
    }
  }
  .adlist{
    padding: 25px 0px 35px 0px;
     width: 100%;
        height: 206px;;
        overflow-x: scroll;
        overflow-y: none;
    margin-top:15px;
    background: #fff;
      div{
          width: 908px;
          padding: 0px 30px;
          img {
          width: 440px;
          height: 206px;
          flex: 440px;
          display: inline-block;
          margin-right: 20px;
        }
        }
       
  }
}
</style>
